<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<title>注册</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
	</head>
	<style>
		.other-bd .icon-weixindenglu {
			color: #1aac19;
		}
	</style>

	<body ontouchstart>
		<header class="ui-header">
			<a href="javascript:history.go(-1)" class="ui-icon hd-left">
				<span class="iconfont icon-fanhui"></span>
			</a>
			<div class="ui-title">注册</div>
		</header>
		<div id="app" class="form-main">
			<div class="form-inner">
				<div class="form-row">
					<div class="text">手机号码</div>
					<input type="text" v-model="phone_number" class="ui-input" placeholder="请输入手机号">
				</div>
				<div class="form-row">
					<div class="text">验证码</div>
					<input type="text" v-model="yzm" class="ui-input" placeholder="请输入验证码">
					<span @click="getCode()" class="ui-vcode-btn">获取验证码</span>
					<!-- <input type="button" onclick="getCode()" class="ui-vcode-btn" value="获取验证码"> -->
				</div>
				<div class="form-row">
					<div class="text">密码</div>
					<input type="passwrod" v-model="passwrod" class="ui-input" placeholder="输入密码，长度不小于6位">
				</div>
				<label for="uiAgree" class="ui-agree">
					<input id="uiAgree" type="checkbox" v-model="tongyi" :checked="tongyi" class="ui-agree__checkbox">
					<span class="ui-agree__text">
						阅读并同意<a href="javascript:void(0);">《用户服务协议》</a>
					</span>
				</label>
				<div class="form-button">
					<button class="ui-btn ui-btn-submit" @click="zhuce">完成注册</button>
				</div>
				<!-- <div class="other-box">
					<div class="other-hd"><span>一键登录</span></div>
					<div class="other-bd">
						<a href=""><span class="iconfont icon-weixin"></span></a>
					</div>
				</div> -->
			</div>
		</div>
		<script src="../../js/jquery-2.1.4.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/common/config.js"></script>
		<script>
			mui.plusReady(function() {
				plus.key.addEventListener('backbutton',
					function() {
						plus.webview.currentWebview().close();
					})
			});
			var vm = new Vue({
				el: "#app",
				data: {
					phone_number: '',
					juhe_id: "20171221888888888",
					passwrod: "",
					yzm: "",
					tongyi:false,
					status: 1,
				},
				methods: {
					// 获取验证码
					getCode() {
						let _that = this;
						if (_that.phone_number != '') {
							// 倒计时
							_that.djs();
							mui.ajax(Config.api.Register, {
								data: {
									phone_number: _that.phone_number,
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									if(data.error_code==0){
										_that.juhe_id = data.result.sid
									}
								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									console.log("接口错误");
								}
							});
						} else {
							alert("手机号不能为空");
						}

					},
					zhuce: function() {
						var _that = this;
						if(_that.phone_number == ''){
							alert("手机号不能为空");
						}else if(_that.passwrod == ''){
							alert("密码不能为空");
						}else if(_that.yzm == ''){
							alert("验证码不能为空");
						}else if(!_that.tongyi){
							alert("阅读并同意用户服务协议");
						}else{
							mui.ajax(Config.api.Register_success, {
								data: {
									juhe_id: _that.juhe_id,
									password: _that.password,
									yzm: _that.yzm,
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									console.log(JSON.stringify(data));
								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									console.log("接口错误");
								}
							});
						}
					},
					djs() {
						var s = 60;
						$('.ui-vcode-btn').text(s + 's后重新获取');
						$('.ui-vcode-btn').attr("onclick", "");
						smstime = setInterval(function() {
							s--;
							$('.ui-vcode-btn').text(s + 's后重新获取');
							if (s == 0) {
								clearInterval(smstime);
								$('.ui-vcode-btn').text("获取验证码");
								$('.ui-vcode-btn').attr("onclick", "getCode()");
							}
						}, 1000)
					},
				}
			});
		</script>
	</body>

</html>
